<!DOCTYPE html>
<html lang="en">
<!--    课程：黑马程序员  《4个小时带你快速入门vue》
        地址：https://www.bilibili.com/video/BV12J411m7MG -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>

    <div id="app">
        <!-- 事件绑定函数传参，可以传自定义参数，这里传入实参 -->
          <input type="button" value="点击" @click="doIt('老铁',666)">  <br>
          <!-- 事件修饰符.enter 可以限制触发的按键为回车 -->
          <input type="text"  @keyup.enter="sayHi">  
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./js/vuev2.7.14.js"></script>

    <script>
        
        var app = new Vue({
            // 通过el属性将 vue实例挂载到div元素的内部
            el: '#app', //推荐使用id选择器
            methods: {
                doIt: function (p1, p2) { //这里定义两个形参，对应事件绑定此函数时传递的实参。
                    console.info(p1);
                    console.info(p2);
                },
                sayHi:function(){
                    alert("吃了吗？");
                }
            }
        })
    </script>
<!-- 总结：
    事件绑定的方法写成函数调用的形式，可以传入自定义参数
    定义方法时需要定义形参来接收传入的实参
    事件的后面跟上.修饰符 可以对事件进行限制
    .enter 可以限制触发的按键为回车
    事件修饰符有多种,其他参考
 -->

</body>


</html>